# Icon Predefined

## Installation
`npm i @snack-uikit/icon-predefined`

[Changelog](./CHANGELOG.md)

## Example

```tsx
import { HeartSVG } from '@snack-uikit/icons';
import { IconPredefined } from '@snack-uikit/icon-predefined';

<IconPredefined
    appearance='red'
    size='l'
    className='className'
    icon={HeartSVG}
    decor
/>
```

## Props

#### **`icon: JSXElementConstructor`**
Компонент svg-иконки из пакета `@snack-uikit/icons`.

#### **`className?: string`**
css-класс контейнера.

#### **`appearance?: Appearance`** - *`primary`*
Цвет иконки. Возможные варианты:
  - `primary`
  - `neutral`
  - `red`
  - `orange`
  - `yellow`
  - `green`
  - `blue`
  - `violet`
  - `pink`

#### **`size?: Size`** - *`s`*
Размер компонента. Возможные варианты:
  - `s`
  - `m`
  - `l`

#### **`decor?: boolean`** - *`[true]`*
Включает цветную подложку для иконки.

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## IconPredefined
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| icon* | `JSXElementConstructor<{ size?: number; className?: string; }>` | - | JSX иконки |
| className | `string` | - | CSS-класс |
| appearance | enum Appearance: `"primary"`, `"neutral"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Внешний вид |
| decor | `boolean` | true | Наличие цветной подложки |
| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
| shape | "round" \| "square" | round | Форма: круглая или квадратная |


[//]: DOCUMENTATION_SECTION_END
